<!-- 节假日游客分析 -->
<template>
  <div class="finish-com15">
    <div ref="maychar" style="width:550px;height:300px;background-color: rgba(0,0,0,0);" class=" finish-item">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    this.getCharts()
  },
  methods: {
    getCharts() {
      const chartBox = this.$echarts.init(this.$refs.maychar);
      const option = {
        legend: {
          data: ['2023年', '2024年'],
          top: 10,
          right: 10,
          textStyle: {
            fontSize: 16,
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['游客评价', '景区管理', '环境保护', '文化历史', '设施服务'],
          axisLabel: { textStyle: { fontSize: "16", }, },

        },
        yAxis: {
          type: 'value',
          name: '件',
          axisLabel: { textStyle: { fontSize: "16", }, },

        },
        series: [
          {
            name: '2023年',
            data: [121, 120, 105, 115, 117, 111, 103],
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 件';
              }
            },
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#01b0e6'
                }, {
                  offset: 1,
                  color: 'rgba(0,0,0,0)'
                }]),
              }
            },
          },
          {
            name: '2024年',
            data: [82, 70, 85, 65, 67, 71, 63],
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 件';
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#90754a'
                }, {
                  offset: 1,
                  color: 'rgba(0,0,0,0)'
                }]),
              }
            },
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped></style>